<template>
    <div>
        <el-table :data="hosts.message.slice((currentPage-1)*pagesize,currentPage*pagesize)">
            <el-table-column prop="vpsname" label="机器名称"></el-table-column>
            <el-table-column prop="product" label="产品地区类型"></el-table-column>
            <el-table-column prop="internet_is_ok" label="外网通否"></el-table-column>
            <el-table-column prop="server_status" label="服务器状态"></el-table-column>
            <el-table-column prop="content" label="备注"></el-table-column>
            <el-table-column prop="uptime" label="平均负载"></el-table-column>          
            <el-table-column prop="cpu_util" label="CPU利用率"></el-table-column>
            <el-table-column prop="used_memory_util" label="内存利用率"></el-table-column>
            <el-table-column prop="disk_root_util" label="磁盘根分区利用率"></el-table-column>
            <el-table-column prop="upload_util" label="过去一天的上行带宽流量"></el-table-column>
            <el-table-column prop="download_util" label="过去一天的下行带宽流量"></el-table-column>
            <el-table-column prop="record_time" label="最近一次记录时间"></el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination v-if="hosts.message.length"
                       background layout=" prev, pager, next, jumper,sizes,total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[5, 10, 20, 40]"
                       :page-size="pagesize"
                       :total="hosts.message.length">
        </el-pagination>

    </div>
</template>


<style>

    el-table-column label {
        color: deepskyblue;
    }
    el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        color: blue;
    }
</style>


<script>
    import axios from 'axios';
    export default {
        data() {
            return {
                currentPage:1, //初始页
                pagesize:5,    //    每页的数据
                hosts: {
                    "message":[]
                },
            }
        },

        methods: {
            handleSizeChange: function (size) {
                this.pagesize = size;
        },
            handleCurrentChange: function(currentPage){
                    this.currentPage = currentPage;
            },
        },
        
    }
            /*
            this.$http.get(url).then(function (res) {
                if(!res.data.status){
                    alert("获取后台数据失败，请联系管理员");
                }else {
                    console.log(11);
                    var enc = new TextDecoder('utf-8')
                    var res = JSON.parse(enc.decode(new Uint8Array(res.data)))
                    vm.hosts = res
                    console.log(22);
                    console.log(res.data.message.length);
                }

            });
        },*/


</script>


